<template>
  <view>
    <view class="list">
      <cartItem
        v-for="item in list"
        :key="item.goods_id"
        :item="item"
      />
    </view>
    <view class="status">
        <u-checkbox
          active-color="#e03440"
          shape="circle"
          :value="isAllChecked"
          @change="toggleAllCheck"
        >
          <text class="checkboxText">全选</text>
        </u-checkbox>
        <view class="priceWrap">
          合计: <text class="price">¥ {{totalPrice}}</text>
        </view>
        <view class="btn" @click="toPay">去结算({{totalProdNumber}})</view>
    </view>
  </view>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'
import cartItem from './components/cartItem.vue'
export default {
  components: {
    cartItem
  },
  computed: {
    ...mapState('cart', ['list']),
    ...mapGetters(['isAllChecked', 'totalPrice', 'totalProdNumber'])
  },
  methods:{
    ...mapMutations('cart', ['toggleAllCheck']),
    toPay() {
      if (this.totalProdNumber === 0) {
        // 警告
        uni.showToast({
          title: '请先添加购买商品',
          icon: 'none'
        })
      }else {
        // 跳转
        uni.navigateTo({
          url: '/pages/pay/pay'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  padding-bottom: 100rpx;
}
.status {
  background: #fff;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 4rpx solid #eee;
  height: 83rpx;
  align-items: center;
  padding: 0 23rpx;
  .checkboxText {
    font-size: 24rpx;
    padding-left: 10rpx;
    color: #888;
  }
  .priceWrap {
    flex: 1;
    font-weight: bold;
    .price {
      color: $theme-color;
      padding-left: 10rpx;
    }
  }
  .btn {
    line-height: 52rpx;
    background: $theme-color;
    color: #fff;
    padding: 0 25rpx;
    border-radius: 26rpx;
  }
}
</style>